<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Inspire - Admin and Dashboard Template</title>
    <link rel="stylesheet" type="text/css" href="/assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/assets/fonts/line-icons.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/main.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/responsive.css">
</head>
<body>
<div class="card-header border-bottom">
    <h4 class="card-title">新员工入职</h4>
</div>
<div class="msg" th:text="${msg}"></div>
<div class="card-body">
    <div class="row">
        <div class="col-lg-10 col-md-12 col-xs-12">
            <form role="form" id="form-validation" novalidate="novalidate">
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label control-label">账号</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" name="userName" id="userName" maxlength="10" placeholder="必填 *">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label control-label">姓名</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" name="realName" maxlength="10" id="realName" placeholder="">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label control-label">电话</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" name="phone" id="phone" maxlength="11" placeholder="">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label control-label">身份证</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" name="card" id="card" maxlength="18" placeholder="" >
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label control-label">职务</label>
                    <div class="col-sm-9">
                        <select name="role" id="role" class="form-control">
                            <option value="">请选择</option>
                            <option th:value="0">超级管理员</option>
                            <option th:value="1">员工</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label control-label">密码</label>
                    <div class="col-sm-9">
                        <input type="password" class="form-control" name="password" id="password" maxlength="16" placeholder="">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label control-label">确认密码</label>
                    <div class="col-sm-9">
                        <input type="password" class="form-control" name="newpassword" id="newpassword" maxlength="16" placeholder="">
                    </div>
                </div>
                <input type="button" id="baocun" class="btn btn-common" value="保存">
                <input id="ret" type="button" class="btn btn-common" value="返回">
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    $(".msg").slideUp(2000);

    $("#userName").bind("blur",userName);
    function userName (){
        var userName = $("#userName").val()
        if(!(/[a-zA-Z]/).test(userName)){
            $("#userName").val("").attr("placeholder","账号只能是大写小写字母和数字")
            return false
        }else{
            return true;
        }
    }
    $("#realName").bind("blur",realName)
    function realName(){
        var realName = $("#realName").val()
        if(!(/^[\u4e00-\u9fa5]{0,}$/).test(realName)){
            $("#realName").val("").attr("placeholder","姓名只能是中文字符")
            return false
        }else{
            return true
        }
    }
    $("#phone").bind("blur",phone)
    function phone(){
        var phone = $("#phone").val()
        if(!(/^1[3|4|5|7|8]\d{9}$/).test(phone)){
            $("#phone").val("").attr("placeholder","电话号码格式错误")
            return false
        }else {
            return true
        }
    }
    $("#card").bind("blur",card)
    function card(){
        var card = $("#card").val()
        if(!(/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/).test(card)){
            $("#card").val("").attr("placeholder","身份证号码格式错误")
            return false
        }else{
            return true
        }
    }

    $("#baocun").bind("click", function () {

        var password = $("#password").val();
        var newpassword = $("#newpassword").val();

        if(password != newpassword) {
            alert("2次密码不一致")
            return;
        }
        if(userName() && realName() && phone() && card()){
            if(!confirm("确定保存吗")) return
            toJump("/user/save",$("#form-validation").serialize())
        }else{
            alert("数据格式不正确")
        }
    })

    $("#ret").bind("click",function () {
        toJump("/user/query")
    })
</script>
<script src="/assets/js/jquery-min.js"></script>
<script src="/assets/js/popper.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/jquery.app.js"></script>
<script src="/assets/js/main.js"></script>
</body>
</html>